$(function () {
  var form = layui.form;
  var content;
  var a;
  var id;
  var type = 1;
  var q = {
    page: 1, // 页码值，默认请求第一页的数据
    limit: 5, // 每页显示几条数据
    type: type, // 文章的发布状态
  };
  //获取链接数据
  function getlinkList() {
    axios({
      method: "GET",
      url: "/ydd_link/list",
      params: q,
    }).then(function (res) {
      console.log(res.data.data);
      content = res.data.data.data;
      if (q.type == 1) {
        renderWen();
      } else if (q.type == 2) {
        renderTu();
      }
      renderPage(res.data.data.count);
    });
  }

  getlinkList();
  $("#wordUrl").on("click", function () {
    q.type = 1;
    getlinkList();
  });
  $("#pictureUrl").on("click", function () {
    q.type = 2;
    getlinkList();
  });
  //文字链接渲染数据
  function renderWen() {
    const rows = content.map((item, index) => {
      return `
      <tr>
      <td >${index + 1}</td>
      <td>${item.title}</td>
      <td>${item.des}</td>
      <td><span class="el-tag-small el-tag">文字类型</span></td>
      <td>${item.url}</td>
      <td>
      <button type="button" class="layui-btn layui-btn-xs layui-btn-normal btn-edit" id="b_edit" data-id="${
        item.id
      }"><i class="layui-icon layui-icon-edit" ></i></button>
      <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" id="b_delete"  data-id="${
        item.id
      }"><i class="layui-icon layui-icon-delete"></i></button>
      </td>
    </tr>
      
      `;
    });
    $("#tb1").empty().append(rows.join(""));
    // renderPage();
  }

  //图片链接渲染数据
  function renderTu() {
    const rows = content.map((item, index) => {
      return `
        <tr>
        <td >${index + 1}</td>
        <td>${item.des}</td>
        <td> <img src="http://124.223.14.236:8060/${item.img}"></td>
        <td><span class="el-tag-small-tu el-tag-tu">图片类型</span></td>
        <td>${item.url}</td>
        <td>
          <button type="button" class="layui-btn layui-btn-xs layui-btn-normal  btn-edit" id="b_edit" data-id="${
            item.id
          }"><i class="layui-icon layui-icon-edit"></i></button>
          <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" id="b_delete"  data-id="${
            item.id
          }"><i class="layui-icon layui-icon-delete"></i></button>
        </td>
      </tr>
        
        `;
    });
    $("#tb2").empty().append(rows.join(""));
  }

  //增加链接按钮事件
  let indexAdd = null;
  $("#btnAddLink").on("click", function () {
    indexAdd = layer.open({
      type: 1,
      area: ["700px", "400px"],
      title: "添加友情链接",
      content: $("#Link-add").html(),
    });
    form.render();
  });

  //select的事件
  form.on("select(select1)", function () {
    a = $("#sel_link").val();
    if (a == 1) {
      $(".w_title").show();
      $(".t_picture").hide();
    } else if (a == 2) {
      $(".w_title").hide();
      $(".t_picture").show();
    }
    console.log(a);
  });

  //上传图片
  $("body").on("click", "#btnChooseImage", function (e) {
    e.preventDefault();
    //  console.log(99);
    $("#file").click();
  });
  //
  var savePath;
  $("body").on("change", "#file", function (e) {
    // var fd = new FormData($(this)[0])
    var file = e.target.files;
    var fd = new FormData();
    fd.append("file", file[0]);

    axios({
      method: "post",
      url: "/common/upload?type=images",
      data: fd,
    }).then(function (res) {
      console.log(res);
      console.log(res.data.data.savePath);
      savePath = res.data.data.savePath;
    });
  });
  //增加链接表单提交
  $("body").on("submit", "#form-add", function (e) {
    e.preventDefault();
    AddLink(a);
  });

  function AddLink(a) {
    console.log(savePath);
    axios({
      method: "post",
      url: "/ydd_link/add",
      data: {
        des: $("#add_des").val(),
        img: savePath,
        title: $("#add_title").val(),
        type: a,
        url: $("#add_pwd").val(),
      },
    }).then(function (res) {
      console.log(res.data);
      if (res.data.errno === 0) {
        layer.msg("添加成功");
        layer.close(indexAdd);
        if (a == 1) {
          q.type = 1;
          getlinkList();
        } else if (a == 2) {
          q.type = 2;
          getlinkList();
        }
      } else {
        layer.msg("添加失败");
      }
    });
  }
  // 给弹出层的取消按钮添加点击事件
  $("body").on("click", "#btn_cancel", function () {
    layer.close(indexAdd);
    layer.close(indexEdit);
  });

  //编辑修改
  var indexEdit = null;
  $("tbody").on("click", "#b_edit", function () {
    console.log(111);
    indexEdit = layer.open({
      type: 1,
      area: ["700px", "400px"],
      title: "修改友情链接",
      content: $("#Link-edit").html(),
    });
    form.render();
    //链接详情
    id = $(this).attr("data-id");
    console.log(id);
    axios({
      method: "GET",
      url: "/ydd_link/rowInfo?id=" + id,
      // params: {
      //   id: id,
      // },
    }).then((res) => {
      console.log(res.data);
      var tp = res.data.data.type;
      console.log(tp);
      if (tp == 1) {
        $(".w_title").show();
      } else if (tp == 2) {
        $(".t_picture").show();
      }
      form.val("form-edit", res.data.data);
    });
  });
  //修改表单事件
  $("body").on("submit", "#form-edit", function (e) {
    e.preventDefault();
    // console.log(3333);
    axios({
      method: "post",
      url: "/ydd_link/update",
      data: $(this).serialize(),
    }).then(function (res) {
      console.log(res.data);
      if (res.data.errno !== 0) {
        return layer.msg("修改链接失败！");
      }
      layer.msg("修改链接成功！");
      layer.close(indexEdit);
      getlinkList();
    });
  });
  //删除链接
  $("tbody").on("click", ".btn-delete", function () {
    id = $(this).attr("data-id");
    console.log(id);
    // 提示用户是否要删除
    layer.confirm("确认删除?", { icon: 3, title: "提示" }, function (index) {
      axios({
        method: "GET",
        url: "/ydd_link/del?id=" + id,
      }).then(function (res) {
        console.log(res.data);
        if (res.data.errno !== 0) {
          return layer.msg("删除链接失败！");
        }
        layer.msg("删除链接成功！");
        layer.close(index);
        getlinkList();
      });
    });
  });

  //分页
  var laypage = layui.laypage;
  function renderPage(count) {
    // console.log(total);
    laypage.render({
      elem: "pageBox",
      count: count, //总页数
      limit: q.limit, //每页显示数量
      curr: q.page, //当前页
      layout: ["count", "limit", "prev", "page", "next", "skip"],
      limits: [2, 3, 5, 10],
      jump: function (obj, first) {
        console.log(obj.curr);
        // 把最新的页码值，赋值到 q 这个查询参数对象中
        q.page = obj.curr;
        if (!first) {
          getlinkList();
        }
      },
    });
  }
});
